import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { withNavigation } from 'react-navigation'
import { Avatar } from './avatar'

const ContactItem = ({ contact, navigation }) => (
  <TouchableOpacity
    style={styles.container}
    onPress={() => console.warn('TODO')}
  >
    <View style={styles.avatar}>
      <Avatar size={50} />
    </View>
    <Text style={styles.name}>{contact.name}</Text>
  </TouchableOpacity>
)

const ContactItemN = withNavigation(ContactItem)

export { ContactItemN as ContactItem }

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: 'whitesmoke',
  },
  avatar: {
    margin: 10,
  },
  name: {
    fontSize: 15,
  },
})
